<template>
  <div>
    <header-tm></header-tm>
    <!-- 轮播 -->
    <van-swipe autoplay="3000" indicator-color="#fff" class="index-bo">
      <van-swipe-item v-for="item in list.gallery" :key="item.id">
        <img v-lazy="item.img_url" />
      </van-swipe-item>
    </van-swipe>

    <div class="cart-title">
      <div class="item">
        <div class="drop"></div>
        <div class="text">30天无忧退货</div>
      </div>
      <div class="item">
        <div class="drop"></div>
        <div class="text">48小时快速退款</div>
      </div>
      <div class="item">
        <!-- <div class="drop"></div> -->
        <div class="text">满88元免邮费</div>
      </div>
    </div>
    <div class="infoCard">
      <p>{{ list.info.name }}</p>
      <p>{{ list.info.goods_brief }}</p>
      <p>{{ list.info.retail_price }}</p>
    </div>
    <div class="pop" @click="showPop">
      <span>请选择规格数量</span>
      <span class="iconfont icon-xianxingtubiaozhizuomoban-09"></span>
    </div>

    <!-- 商品参数 -->
    <div class="parameter">
        <div class="head">商品参数</div>
        <div class="item" v-for="(item,index) in list.attribute" :key="index">
            <div class="son">{{item.name}}</div>
            <div class="son">{{item.value}}</div>
        </div>
    </div>

    <div class="on-show" v-html="list.info.goods_desc">
    </div>

    <div class="issue">
        <div class="h">
            <div class="text">
            <span>常见问题</span>
            <div class="line"></div>
            <div class="line"></div>
            </div>
        </div>
        <div class="b">
            <div class="item" v-for="item in list.issue" :key="item.id">
                <div class="title">
                    <div class="circle"></div>
                    <div class="con">{{item.question}}</div>
                </div>
                <div class="bottom">{{item.answer}}</div>
            </div>
        </div>
    </div>

    <div class="mass">
        <div class="h">
            <div class="text">
            <span>大家都在看</span>
            <div class="line"></div>
            <div class="line"></div>
            </div>
        </div>
        <ul class="fine-list clear">
          <li class="fine-item" v-for="el in list.productList" :key="el.id" @click="jumpGoodsList(el.id)">
            <img :src="el.list_pic_url" alt="" />
            <p class="c-name">{{ el.name }}</p>
            <p class="price">¥{{ el.retail_price }}</p>
          </li>
        </ul>
    </div>

    <div class="mask" v-if="show">
      <div class="mask-card" ref="aa">
        <div class="top">
          <div class="left">
            <img :src="list.info.primary_pic_url" alt="" />
          </div>
          <div class="right">
            <p>价格¥{{ list.info.retail_price }}</p>
            <p>请选择数量</p>
            <span class="iconfont icon-cuo" @click="botju"></span>
          </div>
        </div>
        <div class="bottom">
          <p class="c-title">数量</p>
          <div class="c-num">
            <button @click="numDec" :disabled="num == 1 ? 'disabled' : false">
              -
            </button>
            <input type="text" v-model="num" />
            <button @click="numAdd">+</button>
          </div>
        </div>
      </div>
    </div>
    <div class="card-gou">
      <div class="item" @click="addshou(list.info.id)">
        <div class="ico" :class="actvId ? 'active' : ''"></div>
      </div>
      <div class="item" @click="jumpCard">
        <div class="ico">
          <img
            src=""
            alt=""
          />
          <span>{{carNum}}</span>
        </div>
      </div>
      <div class="item" @click="showPop">立即购买</div>
      <div class="item" @click="bloCart">加入购物车</div>
    </div>
  </div>
</template>
<script>
import Head from "../components/Header";
import { mapState,mapMutations } from "vuex";
import { goods } from "../../../api/home/index";
import { addcollect } from "../../../api/collect/index"
import { listAction } from "../../../api/mine/index"
import { cartList,addCart } from "../../../api/cart/index"
export default {
  data() {
    return {
      list: { info: { name: "" } },
      id: "",
      show: false,
      num: 1,
      carNum:0,
      actvId:false,
      addnum:0
    };
  },
  computed: {
    ...mapState(["goodsId"]),
  },
  methods: {
      ...mapMutations(["getgoodsId"]),
      bloCart() {
        //   console.log(999);
         var _this = this
        this.addnum++
          if (!this.show) {
              this.showPop()
          }
        if (this.addnum >=2) {
            var str = _this.num.toString()
            addCart({goodsId:_this.id,number:str,openId:"15836741268"}).then(res=>{
                console.log(res);
                _this.init2()
            })
        }
      },
      botju() {
          var _this = this
          this.$nextTick(function() {
        this.$refs.aa.style.bottom = "-250px";
        this.addnum = 0
        setTimeout(()=>{
            _this.show = !_this.show
        },300)
      });
      },
      addshou(id) {
          addcollect({goodsId:id,openId:"15836741268"}).then(res=>{
            //   console.log(res);
              this.getList()
          })
      },
      jumpGoodsList(id) {
      this.getgoodsId(id)
      this.init()
      this.getList()
    },
    init() {
      if (this.goodsId != "") {
        localStorage.setItem("goodsId", JSON.stringify(this.goodsId));
      }
      this.id = localStorage.getItem("goodsId");
      goods({ id: this.id, openId: "" }).then((res) => {
        console.log("商品详情");
        console.log(res);
        this.list = res;
        if(this.list.info) {
            // console.log('000');
            this.getList()
        }
        
      });
    },
    init2() {
        cartList({openId:"15836741268"}).then(res=>{
            // console.log(888);
            console.log(res.data.length);
            console.log(res);
            var _this = this
            _this.carNum = 0
            res.data.forEach(item=>{
                _this.carNum += item.number
            })
        })
    },
    getList() {
        var _this = this
        listAction({openId:"15836741268"}).then(res=>{
            // console.log(res);
            _this.actvId = res.collectGoodsList.every(item=>_this.id != item.id)
            console.log(_this.actvId);
        })
    },
    showPop() {
      this.show = true;
      this.$nextTick(function() {
        this.$refs.aa.style.bottom = 0;
      });
    },
    numDec() {
      this.num--;
    },
    numAdd() {
      this.num++;
    },
    jumpCard() {
        this.$router.push('/cart')
    }
  },
  watch: {
    num() {},
  },
  mounted() {
    this.init();
    this.init2()
  },
  components: {
    "header-tm": Head,
  },
};
</script>
<style lang="scss">
body {
  padding-bottom: 50px;
}
</style>
<style lang="scss" scoped>
.van-swipe {
  .van-swipe-item {
    img {
      width: 100%;
      height: 375px;
    }
  }
}

.cart-title {
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  padding: 15px 10px;
  .item {
    width: fit-content;
    .text {
      background: url("http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png")
        no-repeat center left;
      background-size: 5px 5px;
      padding-left: 7px;
    }
  }
}

.infoCard {
  background-color: #fff;
  p {
    &:nth-child(1) {
      padding: 10px;
      font-size: 20.5px;
      margin-top: 15px;
    }
    &:nth-child(2) {
      color: #999;
    }
    &:nth-child(3) {
      font-size: 17.5px;
      color: #b4282d;
      padding-bottom: 20px;
      margin-bottom: 0;
    }
  }
}
.pop {
  border-top: 1px solid #f4f4f4;
  line-height: 46px;
  height: 54px;
  background-color: #fff;
  padding: 0 10px;
  span {
    &:nth-child(1) {
      float: left;
    }
    &:nth-child(2) {
      color: #ccc;
      font-size: 20px;
      float: right;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  .mask-card {
    position: fixed;
    left: 0;
    bottom: -250px;
    width: 100%;
    height: 250px;
    background-color: #fff;
    padding: 15px;
    transition: 0.4s;
    .top {
      height: 88.5px;
      margin-bottom: 17.5px;
      .left {
        float: left;
        width: 88.5px;
        height: 88.5px;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        position: relative;
        text-align: left;
        float: left;
        width: 242px;
        height: 100%;
        p {
          margin: 12px 0;
          line-height: 2;
          &:nth-child(1) {
            color: #b4282d;
          }
        }
        span {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    .bottom {
      height: 56px;
      .c-title {
        text-align: left;
      }
      .c-num {
        text-align: left;
        button {
          font-size: 18px;
          line-height: 1;
          border: none;
          width: 28px;
          height: 28px;
          background-color: #f4f4f4;
          &:nth-child(1) {
            border-radius: 4px 0 0 4px;
          }
          &:nth-child(3) {
            border-radius: 0 4px 4px 0;
          }
        }
        input {
          width: 32px;
          font-size: 16px;
          text-align: center;
          height: 28px;
          margin: 0 2px;
          padding: 0;
          border: none;
          background-color: #f4f4f4;
        }
      }
    }
  }
}
.card-gou {
  position: fixed;
  overflow: hidden;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 50px;
  background-color: #fff;
  .item {
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #f4f4f4;
    &:nth-child(1) {
      position: relative;
      width: 82px;
      height: 100%;
      .ico {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 23px;
        height: 23px;
        background: url("")
          no-repeat center;
        background-size: 23px 23px;
        border: 1px solid #f4f4f4;
        &.active {
            background-image: url("");
        }
      }
    }
    &:nth-child(2) {
      position: relative;
      width: 82px;
      height: 100%;
      .ico {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 32px;
        border: 1px solid #f4f4f4;
        img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 22px;
          height: 22px;
        }
        span {
          position: absolute;
          right: 0;
          top: 0;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          color: #fff;
          background-color: #b4282d;
        }
      }
    }
    &:nth-child(3) {
        width: 104px;
        height: 100%;
        line-height: 50px;
    }
    &:nth-child(4) {
        width: calc(100% - 268px);
        height: 100%;
        background-color: #b4282d;
        line-height: 50px;
        color: #fff;
    }
  }
}
// 商品参数
.parameter {
    padding: 10px 15px;
    background-color: #fff;
    .head {
        font-size: 19px;
        padding: 10px 0;
        text-align: left;
    }
    .item {
        display: flex;
        margin: 10px;
        padding: 10px 0;
        background-color: #f7f7f7;
        .son {
            text-align: left;
            &:nth-child(1) {
                width: 67px;
            }
            &:nth-child(2) {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.issue {
    background-color: #fff;
    .h {
        padding: 17px;
        .text {
            position: relative;
            width: fit-content;
            margin: 0 auto;
            padding: 0 12px;
            .line {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 0.5px;
                width: 50px;
                background-color: #ccc;
                &:nth-child(3) {
                    left: -50px;
                }
                &:nth-child(2) {
                    right: -50px;
                }
            }
        }
    }
    .b {
        padding: 0 15px;
        .item {
            padding-bottom: 12px;
            font-size: 13px;
            .title {
                position: relative;
                display: flex;
                margin-bottom: 4px;
                .circle {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 4px;
                    background-color: #b4282d;
                    border-radius: 50%;
                }
                .con {
                    padding-left: 8px;
                    line-height: 20px;
                }
            }
            .bottom {
                padding-left: 8px;
                text-align: left;
                color: #787878;
            }
        }
    }
}
.mass {
    // background-color: #fff;
    // padding-bottom: 80px;
    margin-top: 55px;
    overflow: hidden;
    .h {
        padding: 17px;
        background-color: #fff;
        .text {
            position: relative;
            width: fit-content;
            margin: 0 auto;
            padding: 0 12px;
            .line {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 0.5px;
                width: 50px;
                background-color: #ccc;
                &:nth-child(3) {
                    left: -50px;
                }
                &:nth-child(2) {
                    right: -50px;
                }
            }
        }
    }
    .fine-list {
        // background-color: #f4f4f4;
      .last {
        position: relative;
      }
      .fine-item {
        float: left;
        box-sizing: border-box;
        margin: 0 0 1% 1%;
        width: 49%;
        height: 222px;
        background-color: #fff;
        padding: 10px 20px;
        text-align: left;
        img {
          display: block;
          width: 130px;
          height: 130px;
          margin-bottom: 20px;
        }
        .c-name {
          line-height: 1;
          font-size: 12px;
          margin-bottom: 16px;
        }
        .price {
          font-size: 12px;
          line-height: 1;
          color: #9c3232;
        }
        .list-title {
          text-align: center;
          font-size: 16px;
          color: #333;
          // line-height: 2;
          margin-top: 20px;
        }
        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .icon img {
          display: block;
          width: 36px;
          height: 37px;
        }
      }
    }
}
</style>
<style lang="scss">
.on-show {
    p {
        margin: 0;
        padding: 0;
    }
    img {
        display: block;
        width: 100%;
    }
}
</style>
